<template>
  <div class="app-container">
    <el-row class="wrapper job">
      <el-col :span="24" class="warp-main">
        <div class="el-bar">
          <!--工具条-->
          <el-col :span="24" class="toolbar" style="padding-top:10px">
            <el-form :inline="true">
              <el-form-item>
                <el-button icon="el-icon-plus" @click="createJob" type="primary">创建任务</el-button>
              </el-form-item>
              <el-form-item>
                <el-radio-group @change="statusChange" v-model="statusSelect" size="small">
                  <el-radio-button label="全部"></el-radio-button>
                  <el-radio-button label="等待中"></el-radio-button>
                  <el-radio-button label="已暂停"></el-radio-button>
                  <el-radio-button label="执行中"></el-radio-button>
                  <el-radio-button label="阻塞中"></el-radio-button>
                  <el-radio-button label="错误"></el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-input v-model="queryKey" placeholder="请输入搜索关键字">
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-search" @click="jobQuery" type="primary">查询</el-button> 共{{jobData.length}}条记录
              </el-form-item>
            </el-form>
          </el-col>

          <!--数据列表-->
          <el-table v-loading="loadingJobDataTable" :data="jobData" highlight-current-row style="width: 100%;">
            <el-table-column :show-overflow-tooltip="true" prop="jobName" label="任务名" sortable></el-table-column>
            <!-- <el-table-column :show-overflow-tooltip="true" prop="jobGroup" label="组名" sortable></el-table-column> -->
            <el-table-column :show-overflow-tooltip="true" prop="jobClassName" label="任务class" sortable></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="jobCropExpression" label="corn表达式" sortable></el-table-column>
            <el-table-column :formatter="jobStatusFormat" :show-overflow-tooltip="true" prop="jobStatus" label="状态" sortable></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="timeZone" label="时区" sortable></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="jobDesc" label="描述" sortable></el-table-column>
            <el-table-column label="操作" fixed="right" width="330">
              <template slot-scope="scope">
                <el-button icon="el-icon-delete" @click="deleteJob(scope.$index, scope.row)" type="danger" size="mini">删除</el-button>
                <el-button class="iconfont icon-tingyong" @click="pauseJob(scope.$index, scope.row)" type="primary" size="mini">暂停</el-button>
                <el-button class="iconfont icon-bushu" @click="resumeJob(scope.$index, scope.row)" type="primary" size="mini">重启</el-button>
                <el-button icon="el-icon-edit" @click="resetJob(scope.$index, scope.row)" type="primary" size="mini">修改</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!--新增job-->
          <el-dialog title="创建job" :visible.sync="jobVisible" :close-on-click-modal="true">
            <el-form :inline="true" ref="f1" :rules="rules1" :model="form1" label-width="80px" class="form-top">
              <el-form-item label="名称" prop="jobName">
                <el-input v-model="form1.jobName" style="width:220px" placeholder="请输入job名称"></el-input>
              </el-form-item>
              <el-form-item label="分组名称" prop="jobGroupName">
                <el-input v-model="form1.jobGroupName" style="width:220px" placeholder="请输入分组名称"></el-input>
              </el-form-item>
              <el-form-item label="类名称" prop="jobClassName">
                <el-input v-model="form1.jobClassName" style="width:220px" placeholder="请输入类名称"></el-input>
              </el-form-item>
              <el-form-item label="corn表达式" prop="cronExpression" >
                <el-input v-model="form1.cronExpression" style="width:220px" placeholder="* * * * * ?" id="cron"></el-input>
              </el-form-item>

              <el-form-item label="描述" prop="desc">
                <el-input type="textarea" v-model="form1.desc" style="width:535px" placeholder="请输入描述"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button class="iconfont icon-chehui" @click="jobVisible=false">取消</el-button>
              <el-button class="iconfont icon-fuxuan" @click="createJobCommit" type="primary">确定</el-button>
            </div>
          </el-dialog>

          <!--重新设置-->
          <el-dialog title="修改job" :visible.sync="resetJobVisible" :close-on-click-modal="true">
            <el-form :inline="true" ref="f2" :rules="rules2" :model="form2" label-width="80px" class="form-top">
              <el-form-item label="名称" prop="jobName">
                <el-input :readonly="true" v-model="form2.jobName" style="width:220px" placeholder="请输入job名称"></el-input>
              </el-form-item>
              <el-form-item label="分组名称" prop="jobGroupName">
                <el-input :readonly="true" v-model="form2.jobGroupName" style="width:220px" placeholder="请输入分组名称"></el-input>
              </el-form-item>
              <el-form-item label="corn表达式" prop="cronExpression">
                <el-input v-model="form2.cronExpression" style="width:220px" placeholder="请输入corn表达式"></el-input>
              </el-form-item>
              <el-form-item label="描述" prop="desc">
                <el-input type="textarea" v-model="form2.desc" style="width:535px" placeholder="请输入描述"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button class="iconfont icon-chehui" @click="resetJobVisible=false">取消</el-button>
              <el-button class="iconfont icon-fuxuan" @click="resetJobCommit" type="primary">确定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { Notification } from 'element-ui';
export default {
  data() {
    return {
      statusSelect: '全部',
      //查询关键词
      queryKey: '',
      //节点数据
      jobData: [
      ],
      jobVisible: false,
      form1: {
        jobName: '',
        jobGroupName: '',
        jobClassName: '',
        cronExpression: '',
        desc: '',
      },
      rules1: {
        jobName: [
          { validator: this.validateJobName, trigger: 'blur' }
        ],
        jobGroupName: [
          { validator: this.validateJobGroupName, trigger: 'blur' }
        ],
        jobClassName: [
          { validator: this.validateJobClassName, trigger: 'blur' }
        ],
        cronExpression: [
          { validator: this.validateCronExpression, trigger: 'blur' }
        ],
      },
      resetJobVisible: false,
      form2: {
        jobName: '',
        jobGroupName: '',
        cronExpression: '',
        desc: '',
      },
      rules2: {
        cronExpression: [
          { validator: this.validateCronExpression, trigger: 'blur' }
        ],
      },
      // 任务查询遮罩
      loadingJobDataTable: false,
    }
  },
  methods: {
    //验证
    validateJobName: function(rule, value, callback) {
      if (value == '') {
        callback(new Error('请输入任务名称'));
      } else {
        let url = this.projectConfig.URL_API_JOB_VALIDATE;
        url += "?jobName=" + this.form1.jobName + "&jobGroupName=" + this.form1.jobGroupName;
        this.httpClient.httpClientget(url).then((response) => {
          let data = response.data;
          if (data) {
            callback(new Error('名称与分组名称组合重复!'));
          } else {
            callback();
          }
        });
      }
    },
    validateJobGroupName: function(rule, value, callback) {
      if (value == '') {
        callback(new Error('请输入分组名称'));
      } else {
        let url = this.projectConfig.URL_API_JOB_VALIDATE;
        url += "?jobName=" + this.form1.jobName + "&jobGroupName=" + this.form1.jobGroupName;
        this.httpClient.httpClientget(url).then((response) => {
          let data = response.data;
          if (data) {
            callback(new Error('名称与分组名称组合重复!'));
          } else {
            callback();
          }
        });
      }
    },
    validateJobClassName: function(rule, value, callback) {
      if (value == '') {
        callback(new Error('请输入类名称'));
      } else {
        let url = this.projectConfig.URL_API_JOB_VALIDATE_CLASS;
        url += "?className=" + value;
        this.httpClient.httpClientget(url).then((response) => {
          let data = response.data;
          if (!data) {
            callback(new Error('不存在该类或格式有误!'));
          } else {
            callback();
          }
        });
      }
    },
    validateCronExpression: function(rule, value, callback) {
      if (value == '') {
        callback(new Error('请输入corn表达式名称'));
      } else {
        let url = this.projectConfig.URL_API_JOB_VALIDATE_CORNEXPRESSION;
        url += "?cornExpression=" + value;
        this.httpClient.httpClientget(url).then((response) => {
          let data = response.data;
          if (!data) {
            callback(new Error('corn表达式格式有误!'));
          } else {
            callback();
          }
        });
      }
    },
    //创建任务
    createJob() {
      if (this.$refs['f1'] != undefined) {
        this.$refs['f1'].resetFields();
      }
      this.jobVisible = true;
    },
    //创建任务
    createJobCommit() {
      this.$refs['f1'].validate((valid) => {
        if (valid) {
          this.jobVisible = false;
          let url = this.projectConfig.URL_API_JOB;
          url += "?jobName=" + this.form1.jobName
            + "&jobClassName=" + this.form1.jobClassName
            + "&jobGroupName=" + this.form1.jobGroupName
            + "&cronExpression=" + this.form1.cronExpression
            + "&desc=" + this.form1.desc
          this.userBaseInfo.setOperObjectName(this.form1.jobName);  
          this.httpClient.httpClientPost(url).then((response) => {
            this.jobQuery();
          });
        }
      });
    },
    // 重新设置
    resetJob: function(index, row) {
      this.resetJobVisible = true;
      this.form2.jobName = row.jobName;
      this.form2.jobGroupName = row.jobGroup;
      this.form2.cronExpression = row.jobCropExpression;
      this.form2.desc = row.jobDesc;
    },
    // 重新设置
    resetJobCommit() {
      this.$refs['f2'].validate((valid) => {
        if (valid) {
          this.resetJobVisible = false;
          let url = this.projectConfig.URL_API_JOB_RESCHEDULE;
          url += "?jobName=" + this.form2.jobName
            + "&jobGroupName=" + this.form2.jobGroupName
            + "&cronExpression=" + this.form2.cronExpression
            + "&desc=" + this.form2.desc;
          this.userBaseInfo.setOperObjectName(this.form2.jobName);  
          this.httpClient.httpClientPost(url).then((response) => {
            this.jobQuery();
          });
        }
      });
    },
    //任务查询
    jobQuery() {
      let status = this.statusSelect;
      if (status == '等待中') {
        status = "WAITING";
      } else if (status == '全部') {
        status = "all";
      } else if (status == '已暂停') {
        status = "PAUSED";
      } else if (status == '执行中') {
        status = "ACQUIRED";
      } else if (status == '阻塞中') {
        status = "BLOCKED";
      } else if (status == '错误') {
        status = "ERROR";
      }
      let url = this.projectConfig.URL_API_JOB;
      url += "?queryKey=" + this.queryKey
        + "&status=" + status;
        // 开启遮罩
        this.loadingJobDataTable = true;
      this.httpClient.httpClientget(url).then((response) => {
          // 遮罩结束
          this.loadingJobDataTable = false;
        let data = response.data;
        this.jobData = data;
      }).catch(error => {
          // 遮罩结束
          this.loadingJobDataTable = false;
      });
    },
    // 删除任务
    deleteJob: function(index, row) {
      this.$confirm("此操作将永久删除此任务, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = this.projectConfig.URL_API_JOB;
          url += "?jobName=" + row.jobName + "&jobGroupName=" + row.jobGroup;
          this.userBaseInfo.setOperObjectName(row.jobName);
          this.httpClient.httpClientDelete(url).then((response) => {
            this.jobQuery();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },

    // 暂停任务
    pauseJob: function(index, row) {
      this.$confirm("此操作将暂停此任务, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = this.projectConfig.URL_API_JOB_PAUSE;
          url += "?jobName=" + row.jobName + "&jobGroupName=" + row.jobGroup;
          this.userBaseInfo.setOperObjectName(row.jobName);
          this.httpClient.httpClientPost(url).then((response) => {
            this.jobQuery();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    // 重启任务
    resumeJob: function(index, row) {
      this.$confirm("此操作将重启此任务, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = this.projectConfig.URL_API_JOB_RESUME;
          url += "?jobName=" + row.jobName + "&jobGroupName=" + row.jobGroup;
          this.userBaseInfo.setOperObjectName(row.jobName);
          this.httpClient.httpClientPost(url).then((response) => {
            this.jobQuery();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    //状态栏位格式化
    jobStatusFormat: function(row, column, cellValue) {
      if (cellValue == 'WAITING') {
        return "等待中";
      }
      if (cellValue == 'PAUSED') {
        return "已暂停";
      }
      if (cellValue == 'ACQUIRED') {
        return "执行中";
      }
      if (cellValue == 'BLOCKED') {
        return "阻塞中";
      }
      if (cellValue == 'ERROR') {
        return "错误";
      }
      return "未知";
    },
    statusChange: function(value) {
      this.jobQuery();
    }
  },
  mounted: function() {
    this.jobQuery();
  }
}
</script>

<style>
.job .el-table tr {
  text-align: center;
}

.job .el-time {
  border: 1px solid;
  border-radius: 4px;
}

.job .el-width {
  width: 400px;
}

.job .el-bar {
  padding-bottom: 50px;
}

.job .el-bar .nbd {
  border-bottom: none;
}

.job .el-dialog__header {
  padding: 20px 20px 10px;
  border-bottom: 1px solid #ccc;
}

.job el-icon-search {
  border: 1px solid #eaeaea;
  border-radius: 4px;
}

.job .search .el-input {
  border: 1px solid #eaeaea;
}

.job .el-date-editor--datetimerange {
  border: 1px solid #eaeaea;
  border-radius: 4px;
}

.job .el-table .cell {
  padding: 0;
}
</style>